<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>

	<!-- Global stylesheets -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
	<link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap_limitless.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/layout.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/components.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/colors.min.css" rel="stylesheet" type="text/css">
	<!-- /global stylesheets -->

	<!-- Core JS files -->
	<script src="assets/js/main/jquery.min.js"></script>
	<script src="assets/js/main/bootstrap.bundle.min.js"></script>
	<!-- /core JS files -->

	<!-- Theme JS files -->
	<script src="assets/js/plugins/prism.min.js"></script>
	<script src="assets/js/plugins/sticky.min.js"></script>
	
	<script src="assets/js/main/app.js"></script>
	<script src="assets/js/pages/components_scrollspy.js"></script>
	<!-- /theme JS files -->

</head>

<body data-spy="scroll" data-target=".sidebar-component-right">

	<!-- Main navbar -->
	<div class="navbar navbar-expand-md navbar-light">
		<div class="navbar-header navbar-dark d-none d-md-flex align-items-md-center">
			<div class="navbar-brand navbar-brand-md">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_light.png" alt="">
				</a>
			</div>
	
			<div class="navbar-brand navbar-brand-xs">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_icon_light.png" alt="">
				</a>
			</div>
		</div>

		<div class="d-flex flex-1 d-md-none">
			<div class="navbar-brand mr-auto">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_dark.png" alt="">
				</a>
			</div>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-mobile">
				<i class="icon-tree5"></i>
			</button>
			<button class="navbar-toggler sidebar-mobile-main-toggle" type="button">
				<i class="icon-paragraph-justify3"></i>
			</button>
			<button class="navbar-toggler sidebar-mobile-component-toggle" type="button">
				<i class="icon-unfold"></i>
			</button>
		</div>

		<div class="collapse navbar-collapse" id="navbar-mobile">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a href="#" class="navbar-nav-link sidebar-control sidebar-main-hide d-none d-md-block">
						<i class="icon-paragraph-justify3"></i>
					</a>
				</li>

				<li class="nav-item">
					<a href="#" class="navbar-nav-link sidebar-control sidebar-component-toggle d-none d-md-block">
						<i class="icon-transmission"></i>
					</a>
				</li>
			</ul>

			<ul class="navbar-nav ml-md-auto">
				<li class="nav-item dropdown">
					<a href="#" class="navbar-nav-link">
						<i class="icon-history mr-2"></i>
						Changelog
						<span class="badge bg-warning-400 badge-pill position-static ml-md-2">2.0</span>
					</a>					
				</li>
			</ul>
		</div>
	</div>
	<!-- /main navbar -->


	<!-- Page content -->
	<div class="page-content">

		<!-- Main sidebar -->
		<div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">

			<!-- Sidebar mobile toggler -->
			<div class="sidebar-mobile-toggler text-center">
				<a href="#" class="sidebar-mobile-main-toggle">
					<i class="icon-arrow-left8"></i>
				</a>
				Navigation
				<a href="#" class="sidebar-mobile-expand">
					<i class="icon-screen-full"></i>
					<i class="icon-screen-normal"></i>
				</a>
			</div>
			<!-- /sidebar mobile toggler -->


			<!-- Sidebar content -->
			<div class="sidebar-content">

        		<!-- Support -->
				<div class="card card-body">
					<a href="http://kopyov.ticksy.com" class="btn bg-success-400 btn-block" target="_blank"><i class="icon-lifebuoy mr-2"></i> Limitless support</a>
				</div>
				<!-- /support -->


				<!-- Main navigation -->
				<div class="card card-sidebar-mobile">
					<ul class="nav nav-sidebar" data-nav-type="accordion">
						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Main</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="index.html" class="nav-link">Introduction</a></li>
						<li class="nav-item"><a href="main_getting_started.html" class="nav-link">Getting started</a></li>
						<li class="nav-item"><a href="main_starter_kit.html" class="nav-link">Starter kit</a></li>
						<li class="nav-item"><a href="main_rtl.html" class="nav-link">RTL layout</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Basic functionality</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="base_scss_css.html" class="nav-link">SCSS and CSS</a></li>
						<li class="nav-item"><a href="base_scss_compile.html" class="nav-link">Compiling SCSS</a></li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link">Plugins</a>
							<ul class="nav nav-group-sub" data-submenu-title="Plugins">
								<li class="nav-item"><a href="plugins_forms.html" class="nav-link">Forms</a></li>
								<li class="nav-item"><a href="plugins_forms_styling.html" class="nav-link">Form styling</a></li>
								<li class="nav-item"><a href="plugins_editors.html" class="nav-link">Editors</a></li>
								<li class="nav-item"><a href="plugins_uploaders.html" class="nav-link">Uploaders</a></li>
								<li class="nav-item"><a href="plugins_extensions.html" class="nav-link">Extensions</a></li>
								<li class="nav-item"><a href="plugins_notifications.html" class="nav-link">Notifications</a></li>
								<li class="nav-item"><a href="plugins_pickers.html" class="nav-link">Pickers</a></li>
								<li class="nav-item"><a href="plugins_tables.html" class="nav-link">Tables</a></li>
								<li class="nav-item"><a href="plugins_ui.html" class="nav-link">UI</a></li>
								<li class="nav-item"><a href="plugins_vis.html" class="nav-link">Visualization</a></li>
							</ul>
						</li>

						<li class="nav-item"><a href="base_bootstrap.html" class="nav-link">Bootstrap</a></li>
						<li class="nav-item"><a href="base_color_system.html" class="nav-link">Color system</a></li>
						<li class="nav-item"><a href="base_helpers.html" class="nav-link">Helpers</a></li>
						<li class="nav-item"><a href="base_themes.html" class="nav-link">Themes</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Layout options</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="layout_overview.html" class="nav-link active">Layouts</a></li>
						<li class="nav-item"><a href="layout_sidebars.html" class="nav-link">Sidebars</a></li>
						<li class="nav-item"><a href="layout_navbars.html" class="nav-link">Navbars</a></li>
						<li class="nav-item"><a href="layout_v_nav.html" class="nav-link">Vertical navigation</a></li>
						<li class="nav-item"><a href="layout_h_nav.html" class="nav-link">Horizontal navigation</a></li>
						<li class="nav-item"><a href="layout_page_header.html" class="nav-link">Page header</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Other</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="other_credits.html" class="nav-link">Sources and credits</a></li>
						<li class="nav-item"><a href="other_changelog.html" class="nav-link">Changelog <span class="badge badge-pill bg-warning-400 ml-auto">version 2.0</span></a></li>
					</ul>
				</div>
			</div>
			<!-- /main navigation -->

		</div>
		<!-- /main sidebar -->


		<!-- Main content -->
		<div class="content-wrapper">

			<!-- Page header -->
			<div class="page-header">
				<div class="page-header-content header-elements-md-inline">
					<div class="page-title d-flex">
						<h4><i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">Limitless</span> - Layouts</h4>
						<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
					</div>

					<div class="header-elements d-none py-0 mb-3 mb-md-0">
						<div class="breadcrumb">
							<a href="index.html" class="breadcrumb-item"><i class="icon-home2 mr-2"></i> Home</a>
							<span class="breadcrumb-item active">Layouts</span>
						</div>
					</div>
				</div>
			</div>
			<!-- /page header -->
			

			<!-- Content area -->
			<div class="content pt-0">

				<!-- Inner container -->
				<div class="d-flex align-items-start flex-column flex-md-row">

					<!-- Left content -->
					<div class="order-2 order-md-1">

							<!-- Layout overview -->
							<div class="card">
								<div class="card-header header-elements-inline">
									<h5 class="card-title" id="layouts_overview">Layouts overview</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
					                </div>
								</div>

								<div class="card-body">
									<div class="mb-3">
										Starting from version 2.0 onwards, Limitless template uses CSS layout fully based on <code>flexbox</code>. This solution makes perfect sense: it's very flexible in terms of markup and structure - you can easily add as many columns as you need using proper classes. And Bootstrap 4 is based on it. All sidebars and content area fill up all available space underneath, all sidebars have fixed <code>270px</code> width, main sidebar can be collapsed or completely hidden. Depending on layout type, markup slightly differs.
									</div>

									<p>Table below describes all layout types available:</p>
									<div class="table-responsive">
										<table class="table table-bordered table-striped">
											<thead>
												<tr>
													<th style="width: 250px;">Layout</th>
													<th>Description</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td class="font-weight-semibold">Layout 1</td>
													<td>Base layout. By default contains sidebar and navbar in dark colors, content area has default <code>&lt;body></code>'s light grey background color. Default styling of components can be changed: sidebars and navbars include different color and styling options; page header can be either white or transparent; breadcrumbs can be placed on top, bottom or as a component.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Layout 2</td>
													<td>Similar to layout 1, but has a bit different defaults - navbar is white by default, but navbar header background color is similar to sidebar's color. Page header has different default styling and is transparent, breadcrumb appears as a component by default and placed after page header content.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Layout 3</td>
													<td>Detached layout. All sidebars appears as separate components and have side spacings. Page header is transparent by default and is full width - placed outside content are right after navbars. Breadcrumb line is moved outside page header and placed after navbar and <strong>before</strong> page header content.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Layout 4</td>
													<td>Full width 1 column layout with horizontal navigation. By default doesn't have any sidebars, but they can be added as alternative content to the content area. Page header is transparent by default and breadcrumb component appears as a part of page title. Breadcrumb line is removed, but still can be used since functionality remains the same.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Layout 5</td>
													<td>Similar to layout 4, but has much better design choice - big dark page header with 2 navigations, including full width multi level mega menu. Sidebars are optional, as well as breadcrumbs. Page header contains search field on the right hand side and a floating action button with sliding dropdown menu.</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
							<!-- /layout overview -->


							<!-- Layout 1 -->
							<div class="card">
								<div class="card-header header-elements-inline">
									<h5 class="card-title" id="layout_1">Layout 1</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
					                </div>
								</div>

								<div class="card-body">
									<div class="mb-4">
									 	<h6 class="font-weight-semibold" id="layout_1_overview">Overview</h6>
									 	<p>First layout is considered as main, all other layouts use this one as a base. It supports up to 4 columns in different combinations: sidebar + content; main sidebar + secondary sidebar + content; main sidebar + secondary sidebar + content + right sidebar; main sidebar + content + right sidebar etc. Main and secondary sidebars can be swapped. All structure variations are markup dependent, this means you need to insert layout parts to the layout and add a proper class to them, no need to add/remove/change any classes elsewhere.</p>
								 	</div>

								 	<div class="mb-4">
								 		<h6 class="font-weight-semibold" id="layout_1_full">Full width markup</h6>
									 	<p>Example below demonstrates basic <strong>full width</strong> 4 columns layout markup - top navbar, 3 sidebars and main content area:</p>

										<pre><code class="language-markup">&lt;!-- Liquid layout -->
&lt;body>

	&lt;!-- Main navbar -->
	&lt;div class="navbar navbar-expand-md navbar-dark">
		...
	&lt;/div>
	&lt;!-- /main navbar -->


	&lt;!-- Page content -->
	&lt;div class="page-content">

		&lt;!-- Main sidebar -->
		&lt;div class="sidebar sidebar-main">
			...
		&lt;/div>
		&lt;!-- /main sidebar -->


		&lt;!-- Secondary sidebar -->
		&lt;div class="sidebar sidebar-light sidebar-secondary sidebar-expand-md">
			...
		&lt;/div>
		&lt;!-- /secondary sidebar -->


		&lt;!-- Main content -->
		&lt;div class="content-wrapper">

			&lt;!-- Page header -->
			&lt;div class="page-header">
				...
			&lt;/div>
			&lt;!-- /page header -->


			&lt;!-- Content area -->
			&lt;div class="content">
				...
			&lt;/div>
			&lt;!-- /content area -->


			&lt;!-- Footer -->
			&lt;div class="navbar navbar-expand-md navbar-light">
				...
			&lt;/div>
			&lt;!-- /footer -->

		&lt;/div>
		&lt;!-- /main content -->


		&lt;!-- Right sidebar -->
		&lt;div class="sidebar sidebar-light sidebar-right sidebar-expand-md">
			...
		&lt;/div>
		&lt;!-- /right sidebar -->

	&lt;/div>
	&lt;!-- /page content -->

&lt;/body>
</code></pre>
									</div>

									<div>
										<h6 class="font-weight-semibold" id="layout_1_fixed">Fixed width markup</h6>
										<p>Markup of the <strong>boxed</strong> (or fixed width) layout is the same, the only difference is 2 additional class names: <code>.layout-boxed-bg</code> adds background image to the document <strong>body</strong>; <code>.layout-boxed</code> class adds proper spacing to content area, page header, breadcrumbs and navbars. You can use either darker background color added to the <code>body</code> element in CSS, or any background image, it's up to you. Styles for <code>body</code> element you can find in <code>_boxed.scss</code> file located in <code>global_assets/scss/layouts/[layout]/[theme]/layout/</code> folder.</p>

										<p>Boxed layout markup example:</p>
										<pre><code class="language-markup">&lt;!-- Boxed layout -->
&lt;body class="layout-boxed-bg">

	&lt;!-- Boxed layout wrapper -->
	&lt;div class="d-flex flex-column flex-1 layout-boxed">
		...
	&lt;/div>
	&lt;!-- / boxed layout wrapper -->

&lt;/body>
&lt;!-- /boxed layout -->
</code></pre>
									</div>
								</div>
							</div>
							<!-- /layout 1 -->


							<!-- Layout 2 -->
							<div class="card">
								<div class="card-header header-elements-inline">
									<h5 class="card-title" id="layout_2">Layout 2</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
					                </div>
								</div>

								<div class="card-body">
									<div class="mb-4">
									 	<h6 class="font-weight-semibold" id="layout_2_overview">Overview</h6>
									 	<p>Second layout uses same markup as the first one, but some components have different default styling: <strong>navbar</strong> component includes additional <code>.navbar-header</code> component which includes 2 types of logos and adds background color to the logo area; <strong>page header</strong> component has different default styling to avoid extra classes added to their containers.</p>
								 	</div>

								 	<div class="mb-4">
								 		<h6 class="font-weight-semibold" id="layout_2_full">Full width markup</h6>
									 	<p>Example below demonstrates basic <strong>full width</strong> 4 columns layout markup - top navbar, 3 sidebars and main content area:</p>

										<pre data-line="7-17"><code class="language-markup">&lt;!-- Liquid layout -->
&lt;body>

	&lt;!-- Main navbar -->
	&lt;div class="navbar navbar-expand-md navbar-dark">

		&lt;!-- Header with logos -->
		&lt;div class="navbar-header navbar-dark d-none d-md-flex align-items-md-center">
			&lt;div class="navbar-brand navbar-brand-md">
				...
			&lt;/div>
			
			&lt;div class="navbar-brand navbar-brand-xs">
				...
			&lt;/div>
		&lt;/div>
		&lt;!-- /header with logos -->

		...
	&lt;/div>
	&lt;!-- /main navbar -->


	&lt;!-- Page content -->
	&lt;div class="page-content">

		&lt;!-- Main sidebar -->
		&lt;div class="sidebar sidebar-main">
			...
		&lt;/div>
		&lt;!-- /main sidebar -->


		&lt;!-- Secondary sidebar -->
		&lt;div class="sidebar sidebar-light sidebar-secondary sidebar-expand-md">
			...
		&lt;/div>
		&lt;!-- /secondary sidebar -->


		&lt;!-- Main content -->
		&lt;div class="content-wrapper">

			&lt;!-- Page header -->
			&lt;div class="page-header">
				...
			&lt;/div>
			&lt;!-- /page header -->


			&lt;!-- Content area -->
			&lt;div class="content">
				...
			&lt;/div>
			&lt;!-- /content area -->


			&lt;!-- Footer -->
			&lt;div class="navbar navbar-expand-md navbar-light">
				...
			&lt;/div>
			&lt;!-- /footer -->

		&lt;/div>
		&lt;!-- /main content -->


		&lt;!-- Right sidebar -->
		&lt;div class="sidebar sidebar-light sidebar-right sidebar-expand-md">
			...
		&lt;/div>
		&lt;!-- /right sidebar -->

	&lt;/div>
	&lt;!-- /page content -->

&lt;/body>
</code></pre>
									</div>

									<div>
										<h6 class="font-weight-semibold" id="layout_2_fixed">Fixed width markup</h6>
										<p>Boxed width markup of second layout is the same as in first layout, without additions and changes. To use fixed width, add <code>.layout-boxed-bg</code> class to the <code>&lt;body></code> tag to add optional background image and <code>.layout-boxed</code> class along with flexbox utility classesd that add proper spacing to content area, page header, breadcrumbs and navbars. You can use either darker background color added to the <code>body</code> element in CSS, or any background image, it's up to you. Styles for <code>body</code> element you can find in <code>_boxed.scss</code> file located in <code>global_assets/scss/layouts/[layout]/[theme]/layout/</code> folder.</p>

										<p>Boxed layout markup example:</p>
										<pre><code class="language-markup">&lt;!-- Boxed layout -->
&lt;body class="layout-boxed-bg">

	&lt;!-- Boxed layout wrapper -->
	&lt;div class="d-flex flex-column flex-1 layout-boxed">
		...
	&lt;/div>
	&lt;!-- / boxed layout wrapper -->

&lt;/body>
&lt;!-- /boxed layout -->
</code></pre>
									</div>
								</div>
							</div>
							<!-- /layout 2 -->


							<!-- Layout 3 -->
							<div class="card">
								<div class="card-header header-elements-inline">
									<h5 class="card-title" id="layout_3">Layout 3</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
					                </div>
								</div>

								<div class="card-body">
									<div class="mb-4">
									 	<h6 class="font-weight-semibold" id="layout_3_overview">Overview</h6>
									 	<p>Third layout's structure is different from the first and second variations. Here <strong>page header</strong> component is moved outside <code>.page-content</code> container and placed right after main <strong>navbar</strong> component. All sidebars remain on the same position, but appear as detached stand-alone components. In this version sidebars don't have a <code>.sidebar-content</code> option as they are detached by default. Also in first 2 layouts <strong>footer</strong> markup is placed inside <code>&lt;div class="content">...&lt;/div></code> container after all content. In this layout footer isn't covered or pushed by sidebar, so that despite number of sidebars, footer always appears at the very bottom.</p>
								 	</div>

								 	<div class="mb-4">
								 		<h6 class="font-weight-semibold" id="layout_3_full">Full width markup</h6>
									 	<p>Example below demonstrates basic <strong>full width</strong> 4 columns layout markup - top navbar, 3 sidebars and main content area:</p>

										<pre data-line="11-15, 52-56"><code class="language-markup">&lt;!-- Liquid layout -->
&lt;body>

	&lt;!-- Main navbar -->
	&lt;div class="navbar navbar-expand-md navbar-dark">
		...
	&lt;/div>
	&lt;!-- /main navbar -->


	&lt;!-- Page header -->
	&lt;div class="page-header">
		...
	&lt;/div>
	&lt;!-- /page header -->


	&lt;!-- Page content -->
	&lt;div class="page-content pt-0">

		&lt;!-- Main sidebar -->
		&lt;div class="sidebar sidebar-main">
			...
		&lt;/div>
		&lt;!-- /main sidebar -->


		&lt;!-- Secondary sidebar -->
		&lt;div class="sidebar sidebar-secondary">
			...
		&lt;/div>
		&lt;!-- /secondary sidebar -->


		&lt;!-- Main content -->
		&lt;div class="content-wrapper">
			...
		&lt;/div>
		&lt;!-- /main content -->


		&lt;!-- Right sidebar -->
		&lt;div class="sidebar sidebar-right">
			...
		&lt;/div>
		&lt;!-- /right sidebar -->

	&lt;/div>
	&lt;!-- /page content -->


	&lt;!-- Footer -->
	&lt;div class="navbar navbar-expand-md navbar-light">
		...
	&lt;/div>
	&lt;!-- /footer -->

&lt;/body>
</code></pre>
									</div>

									<div>
										<h6 class="font-weight-semibold" id="layout_3_fixed">Fixed width markup</h6>
										<p>In 3rd layout version, boxed layout needs additional markup changes. You need to wrap inner content of navbar, page header and breadcrumb line in <code>&lt;div class="container" /></code> wrapper and add <code>.container</code> class to <code>.page-content</code> container. In this version <code>body</code> doesn't include any background images, it uses containers mentioned earlier to center content in components, but keep components themself full width.</p>

										<p>Boxed layout markup example:</p>
										<pre data-line="7-11, 20-22, 25-27, 33-35"><code class="language-markup">&lt;!-- Fixed layout -->
&lt;body>

	&lt;!-- Main navbar -->
	&lt;div class="navbar navbar-expand-md navbar-dark">
		
		&lt;!-- Boxed container -->
		&lt;div class="container">
			...
		&lt;/div>
		&lt;!-- /boxed container -->

	&lt;/div>
	&lt;!-- /main navbar -->


	&lt;!-- Page header -->
	&lt;div class="page-header">
		&lt;div class="breadcrumb-line breadcrumb-line-light px-0">
			&lt;div class="container header-elements-md-inline">
				...
			&lt;/div>
		&lt;/div>

		&lt;div class="page-header-content container header-elements-md-inline">
			...
		&lt;/div>
	&lt;/div>
	&lt;!-- /page header -->


	&lt;!-- Page content -->
	&lt;div class="page-content container pt-0">
		...
	&lt;/div>
	&lt;!-- /page content -->

	...

&lt;/body>
</code></pre>
									</div>
								</div>
							</div>
							<!-- /layout 3 -->


							<!-- Layout 4 -->
							<div class="card">
								<div class="card-header header-elements-inline">
									<h5 class="card-title" id="layout_4">Layout 4</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
					                </div>
								</div>

								<div class="card-body">
									<div class="mb-4">
									 	<h6 class="font-weight-semibold" id="layout_4_overview">Overview</h6>
									 	<p>Fourth layout structure is the same as in third, the only difference is by default it doesn't have any sidebars and uses multiple navbars for navigation, so called "Horizontal navigation layout". Although by default sidebars aren't presented, the functionality remains the same - sidebars can be used in any page, but the importance is much lower, means they can be used for alternative page navigation or page content. Instead, navbar navigation supports multiple child levels.</p>
								 	</div>

								 	<div class="mb-4">
								 		<h6 class="font-weight-semibold" id="layout_4_full">Full width markup</h6>
									 	<p>Example below demonstrates basic <strong>full width</strong> - 2 top navbar and main content area:</p>

										<pre data-line="11-15, 38-42"><code class="language-markup">&lt;!-- Liquid layout -->
&lt;body>

	&lt;!-- Main navbar -->
	&lt;div class="navbar navbar-inverse">
		...
	&lt;/div>
	&lt;!-- /main navbar -->


	&lt;!-- Navigation navbar -->
	&lt;div class="navbar navbar-expand-md navbar-light">
		...
	&lt;/div>
	&lt;!-- /navigation navbar -->


	&lt;!-- Page header -->
	&lt;div class="page-header">
		...
	&lt;/div>
	&lt;!-- /page header -->


	&lt;!-- Page content -->
	&lt;div class="page-content pt-0">

		&lt;!-- Main content -->
		&lt;div class="content-wrapper">
			...
		&lt;/div>
		&lt;!-- /main content -->

	&lt;/div>
	&lt;!-- /page content -->


	&lt;!-- Footer -->
	&lt;div class="navbar navbar-expand-md navbar-light">
		...
	&lt;/div>
	&lt;!-- /footer -->

&lt;/body>

&lt;/body>
</code></pre>
									</div>

									<div>
										<h6 class="font-weight-semibold" id="layout_4_fixed">Fixed width markup</h6>
										<p>In 4th layout version, boxed layout completely replicates 3rd layout. You need to wrap inner content of navbar, page header and breadcrumb line in <code>&lt;div class="container" /></code> wrapper and add <code>.container</code> class to <code>.page-content</code> container. In this version <code>body</code> doesn't include any background images, it uses containers mentioned earlier to center content in components, but keep components themself full width.</p>

										<p>Boxed layout markup example:</p>
										<pre data-line="7-11, 19-23, 25-27, 32-36"><code class="language-markup">&lt;!-- Fixed layout -->
&lt;body>

	&lt;!-- Main navbar -->
	&lt;div class="navbar navbar-expand-md navbar-dark">
		
		&lt;!-- Boxed container -->
		&lt;div class="container">
			...
		&lt;/div>
		&lt;!-- /boxed container -->

	&lt;/div>
	&lt;!-- /main navbar -->


	&lt;!-- Page header -->
	&lt;div class="page-header">
		&lt;div class="breadcrumb-line breadcrumb-line-light px-0">
			&lt;div class="container header-elements-md-inline">
				...
			&lt;/div>
		&lt;/div>

		&lt;div class="page-header-content container header-elements-md-inline">
			...
		&lt;/div>
	&lt;/div>
	&lt;!-- /page header -->


	&lt;!-- Page content -->
	&lt;div class="page-content container pt-0">
		...
	&lt;/div>
	&lt;!-- /page content -->

	...

&lt;/body>
</code></pre>
									</div>
								</div>
							</div>
							<!-- /layout 4 -->


							<!-- Layout 5 -->
							<div class="card">
								<div class="card-header header-elements-inline">
									<h5 class="card-title" id="layout_5">Layout 5</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
					                </div>
								</div>

								<div class="card-body">
									<div class="mb-4">
									 	<h6 class="font-weight-semibold" id="layout_5_overview">Overview</h6>
									 	<p>Fifth layout is similar to 4th with a few exceptions: main and secondary navbars and page header have dark background color. And floating action button is a part of layout. Markup is slightly different - 2 navbars and floating action button are placed inside page header. Although by default sidebars aren't presented, the functionality remains the same - sidebars can be used in any page, but the importance is much lower, means they can be used for alternative page navigation or page content. Instead, navbar navigation supports multiple child levels.</p>
								 	</div>

								 	<div class="mb-4">
								 		<h6 class="font-weight-semibold" id="layout_5_full">Full width markup</h6>
									 	<p>Example below demonstrates basic <strong>full width</strong> - 2 top navbar and main content area:</p>

										<pre data-line="9-11, 16-20, 23-27, 41, 55-57"><code class="language-markup">&lt;!-- Liquid layout -->
&lt;body>

	&lt;!-- Page header -->
	&lt;div class="page-header page-header-dark">

		&lt;!-- Main navbar -->
		&lt;div class="navbar navbar-expand-md navbar-dark border-transparent">
			&lt;div class="container">
				...
			&lt;/div>
		&lt;/div>
		&lt;!-- /main navbar -->


		&lt;!-- Page header content -->
		&lt;div class="page-header-content header-elements-md-inline">
			...
		&lt;/div>
		&lt;!-- /page header content -->


		&lt;!-- Secondary navbar -->
		&lt;div class="navbar navbar-expand-md navbar-dark border-top-0">
			...
		&lt;/div>
		&lt;!-- /secondary navbar -->


		&lt;!-- Floating menu -->
		&lt;ul class="fab-menu fab-menu-absolute fab-menu-top-right" data-fab-toggle="click">
			...
		&lt;/ul>
		&lt;!-- /floating menu -->

	&lt;/div>
	&lt;!-- /page header -->


	&lt;!-- Page content -->
	&lt;div class="page-content container">

		&lt;!-- Main content -->
		&lt;div class="content-wrapper">
			...
		&lt;/div>
		&lt;!-- /main content -->

	&lt;/div>
	&lt;!-- /page content -->


	&lt;!-- Footer -->
	&lt;div class="navbar navbar-expand-md navbar-light">
		&lt;div class="container">
			...
		&lt;/div>
	&lt;/div>
	&lt;!-- /footer -->

&lt;/body>

&lt;/body>
</code></pre>
									</div>

									<div>
										<h6 class="font-weight-semibold" id="layout_5_fixed">Fixed width markup</h6>
										<p>In 5th layout version, boxed layout completely replicates 3rd and 4th layouts. You need to wrap inner content of navbar, page header and breadcrumb line in <code>&lt;div class="container" /></code> wrapper and add <code>.container</code> class to <code>.page-content</code> container. In this version <code>body</code> doesn't include any background images, it uses containers mentioned earlier to center content in components, but keep components themself full width.</p>

										<p>Boxed layout markup example:</p>
										<pre data-line="7-11, 19-23, 25-27, 32-36"><code class="language-markup">&lt;!-- Fixed layout -->
&lt;body>

	&lt;!-- Page header -->
	&lt;div class="page-header page-header-dark">

		&lt;!-- Main navbar -->
		&lt;div class="navbar navbar-expand-md navbar-dark border-transparent px-0">
			&lt;div class="container">
				...
			&lt;/div>
		&lt;/div>
		&lt;!-- /main navbar -->


		&lt;!-- Page header content -->
		&lt;div class="page-header-content header-elements-md-inline container">
			...
		&lt;/div>
		&lt;!-- /page header content -->


		&lt;!-- Secondary navbar -->
		&lt;div class="navbar navbar-expand-md navbar-dark border-top-0 px-0">
			&lt;div class="container position-relative">
				...
			&lt;/div>
		&lt;/div>
		&lt;!-- /secondary navbar -->


		&lt;!-- Floating menu -->
		&lt;ul class="fab-menu fab-menu-top-right" data-fab-toggle="click">
			...
		&lt;/ul>
		&lt;!-- /floating menu -->

	&lt;/div>
	&lt;!-- /page header -->
		

	&lt;!-- Page content -->
	&lt;div class="page-content container">
		...
	&lt;/div>
	&lt;!-- /page content -->

	...

&lt;/body>
</code></pre>
									</div>
								</div>
							</div>
							<!-- /layout 5 -->

					</div>
					<!-- /left content -->


					<!-- Right sidebar component -->
					<div class="sidebar-sticky w-100 w-md-auto order-1 order-md-2">
						<div class="sidebar sidebar-light sidebar-component sidebar-component-right sidebar-expand-md mb-3">
							<div class="sidebar-content">
								<div class="card">
									<div class="card-header bg-transparent header-elements-inline">
										<span class="text-uppercase font-size-sm font-weight-semibold">Page navigation</span>
										<div class="header-elements">
											<div class="list-icons">
						                		<a class="list-icons-item" data-action="collapse"></a>
					                		</div>
				                		</div>
									</div>

									<div class="card-body">
										<a href="http://themeforest.net/user/kopyov" class="btn bg-blue btn-block" target="_blank"><i class="icon-reading mr-2"></i> Contact author</a>
									</div>

									<ul class="nav nav-sidebar nav-scrollspy" data-nav-type="accordion">
										<li class="nav-item-header pt-0"><div class="text-uppercase font-size-xs line-height-xs">Sections</div> <i class="icon-menu"></i></li>
										<li class="nav-item"><a href="#layouts_overview" class="nav-link">Layouts overview</a></li>
										<li class="nav-item nav-item-submenu">
											<a href="#layout_1" class="nav-link">Layout 1</a>
											<ul class="nav nav-group-sub d-block">
												<li class="nav-item"><a href="#layout_1_overview" class="nav-link">Overview</a></li>
												<li class="nav-item"><a href="#layout_1_full" class="nav-link">Full width</a></li>
												<li class="nav-item"><a href="#layout_1_fixed" class="nav-link">Fixed width</a></li>
											</ul>
										</li>
										<li class="nav-item nav-item-submenu">
											<a href="#layout_2" class="nav-link">Layout 2</a>
											<ul class="nav nav-group-sub d-block">
												<li class="nav-item"><a href="#layout_2_overview" class="nav-link">Overview</a></li>
												<li class="nav-item"><a href="#layout_2_full" class="nav-link">Full width</a></li>
												<li class="nav-item"><a href="#layout_2_fixed" class="nav-link">Fixed width</a></li>
											</ul>
										</li>
										<li class="nav-item nav-item-submenu">
											<a href="#layout_3" class="nav-link">Layout 3</a>
											<ul class="nav nav-group-sub d-block">
												<li class="nav-item"><a href="#layout_3_overview" class="nav-link">Overview</a></li>
												<li class="nav-item"><a href="#layout_3_full" class="nav-link">Full width</a></li>
												<li class="nav-item"><a href="#layout_3_fixed" class="nav-link">Fixed width</a></li>
											</ul>
										</li>
										<li class="nav-item nav-item-submenu">
											<a href="#layout_4" class="nav-link">Layout 4</a>
											<ul class="nav nav-group-sub d-block">
												<li class="nav-item"><a href="#layout_4_overview" class="nav-link">Overview</a></li>
												<li class="nav-item"><a href="#layout_4_full" class="nav-link">Full width</a></li>
												<li class="nav-item"><a href="#layout_4_fixed" class="nav-link">Fixed width</a></li>
											</ul>
										</li>
										<li class="nav-item nav-item-submenu">
											<a href="#layout_4" class="nav-link">Layout 5</a>
											<ul class="nav nav-group-sub d-block">
												<li class="nav-item"><a href="#layout_5_overview" class="nav-link">Overview</a></li>
												<li class="nav-item"><a href="#layout_5_full" class="nav-link">Full width</a></li>
												<li class="nav-item"><a href="#layout_5_fixed" class="nav-link">Fixed width</a></li>
											</ul>
										</li>
										<li class="nav-item-divider"></li>
										<li class="nav-item"><a href="#" class="nav-link">Go to top <i class="icon-circle-up2 mr-0 ml-auto"></i></a></li>
									</ul>
								</div>
				            </div>
						</div>
					</div>
					<!-- /right sidebar component -->

				</div>
				<!-- /inner container -->

			</div>
			<!-- /content area -->


			<!-- Footer -->
			<div class="navbar navbar-expand-lg navbar-light">
				<div class="text-center d-lg-none w-100">
					<button type="button" class="navbar-toggler dropdown-toggle" data-toggle="collapse" data-target="#navbar-footer">
						<i class="icon-unfold mr-2"></i>
						Footer
					</button>
				</div>

				<div class="navbar-collapse collapse" id="navbar-footer">
					<span class="navbar-text">
						&copy; 2015 - 2018. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
					</span>

					<ul class="navbar-nav ml-lg-auto">
						<li class="nav-item"><a href="https://themeforest.net/item/limitless-responsive-web-application-kit/13080328?ref=kopyov" class="navbar-nav-link font-weight-semibold"><span class="text-pink-400"><i class="icon-cart2 mr-2"></i> Purchase</span></a></li>
					</ul>
				</div>
			</div>
			<!-- /footer -->

		</div>
		<!-- /main content -->

	</div>
	<!-- /page content -->

</body>
</html>
